<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>类型列表</span>
          <el-button class="button" @click="show = true" text
            >添加类型</el-button
          >
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="类型名称" />
        <el-table-column prop="createdAt" label="创建时间">
          <template #default="scope">{{ Time(scope.row.createdAt) }}</template>
        </el-table-column>
        <el-table-column prop="id" label="操作">
          <template #default="scope">
            <el-button @click="edit(scope.row.id)">修改</el-button>
            <el-button @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="show" title="添加/修改类型" width="800">
      <el-form :model="form" label-position="left" label-width="140px">
        <el-form-item label="类型名称">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="提交">
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import { Try, Time } from "@/utils";
import { getMovieType, postMovieType, putMovieType, delMovieType } from "@/api";
const show = ref(false);
const total = ref(0);
const tableData = ref([]);
const form = reactive({
  name: "",
  id: "",
});
function getlist() {
  Try(async () => {
    const res = await getMovieType();
    console.log(res);
    if (res.code === 200) {
      tableData.value = res.data;
    }
  });
}
function submit() {
  Try(async () => {
    const { id } = form;
    const res = id ? await putMovieType(form) : await postMovieType(form);
    console.log(res);
    if (res.code === 200) {
      ElMessage.success(res.message);
      show.value = false;
      getlist();
      form.name = "";
      form.id = "";
    } else {
      ElMessage.error(res.message);
    }
  });
}
function edit(id) {
  Try(async () => {
    const res = await getMovieType({ id });
    console.log(res);
    if (res.code === 200) {
      show.value = true;
      const { name, id } = res.data[0];
      form.name = name;
      form.id = id;
    }
  });
}
function del(id) {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    Try(async () => {
      const res = await delMovieType({ id });
      if (res.code === 200) {
        ElMessage.success(res.message);
        getlist();
      }
    });
  });
}
onMounted(() => {
  getlist();
});
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
